<template>
  <div class="page-container">
    <header-component></header-component>
    <div class="container">
      <Row class="operate-box" :gutter="5" justify="space-between">
        <i-col class="operate-item">
          <div class="operate-item">
            <Input v-model="searchKey" search placeholder="输入搜索"/>
          </div>
        </i-col>
      </Row>
      <tool-nav-component :search-key="searchKey"></tool-nav-component>
      <navigation-component :search-key="searchKey"></navigation-component>
      <about-component></about-component>
    </div>
  </div>
</template>

<script>
import MTitle from "@/components/MTitle";
import MIcon from "@/components/MIcon";
import ContentArea from "@/components/ContentArea";
import Navigation from "@/views/NavigationComponent";
import NavigationPage from "@/views/NavigationComponent";
import NavigationComponent from "@/views/NavigationComponent";
import ToolPage from "@/components/ToolPage";
import ToolNavPage from "@/views/ToolNavComponent";
import ToolNavComponent from "@/views/ToolNavComponent";
import AboutComponent from "@/views/AboutComponent";
import HeaderComponent from "@/views/HeaderComponent";

export default {
  name: "Home",
  components: {
    HeaderComponent,
    NavigationComponent,
    ToolNavComponent,
    AboutComponent, ToolNavPage, ToolPage, NavigationPage, Navigation, ContentArea, MIcon, MTitle
  },
  data() {
    return {
      searchKey: ''
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  max-width: 1900px;
  width: 90%;
  margin: 0 auto;
}

.operate-box {
  margin-top: 20px;
}

</style>
